<template>
  <fieldset>
    <legend>counter</legend>
    <button @click="decrease('other')">-</button>
    {{ $store.state.count }}
    <button @click="nick">+</button>
    {{msg()}}
    <!-- 获取getters中的值 -->
    <h1 style="color:deeppink">
        {{reverseName}}
    </h1>
    <button @click="getProduct">点击</button>
  </fieldset>
</template>

<script>
//引入vuex的辅助函数
//会很奇怪
//会映射到组件的computed属性里面
//映射的意思就是让组件拿到vuex的数据
//状态的辅助函数
// import { mapState } from "vuex";
//mutations的辅助函数
//Getters的辅助函数
import { mapState,mapMutations,mapGetters} from "vuex";
export default {
  mounted() {
    //   console.log(this)
  },
  data(){
    return {
        //返回辅助函数源码
        //会实时响应
        //用this.$store.state不能实时响应
        ...mapState(["msg"]),

    }
  },
  methods: {
    //直接传入mutations的函数名字
    ...mapMutations(["increment","decrease","getProduct"]),
    nick(){
        //vue的特性但是这样写不规范的
        this.$store.state.count ++
    }
    // add() {
    //   //此方法触发vuex mutations中的方法
    //   this.$store.commit("increment", "other");
    // },
    // decrease() {
    //   this.$store.commit("decrease", "我要的真不多");
    // },
  },
  //语法:
  computed: {
    //展开运算符配合mapState
    // ...mapState(["age"])
    //等同
    name() {
      return this.$store.state.age;
    },
    //映射到计算属性里
    ...mapGetters(["reverseName"])
  },
};
</script>

<style></style>
